import { createVNode, render } from "vue";

export function useInputInfo() {
  const model = ref("");
  const isFocus = ref(false);

  function onFocusIn() {
    isFocus.value = true;
  }
  function onFocusOut() {
    isFocus.value = false;
  }

  return reactive({ model, isFocus, onFocusIn, onFocusOut });
}

export function useShowDialog() {
  const vm = getCurrentInstance();

  let control;
  // vm.appContext
  async function show() {
    // document.body.
    control = document.createElement("div");
    document.body.appendChild(control);

    const vComponent = await import("./Dialog.vue");
    const vnode = createVNode(vComponent.default, { title: "弹窗", visible: true });
    vnode.appContext = vm.appContext; //! 目的是为了创建的这个虚拟dom 能够渲染main.ts 中所加入的第三方组件
    // render // h
    render(vnode, control);
    // vnode.component.props.
  }

  // onBeforeUnmount
  onUnmounted(() => {
    if (control) {
      render(null, control);
      document.body.removeChild(control);
    }
  });

  return { show };
}
